<!--
 * @Description: 
 * @LastEditors: xzh
 * @LastEditTime: 2024-07-09 23:31:27
-->
<template>
  <div class="content-container">
    <div class="content-split">
      <div class="content-cloumn-split">
        <BorderBox1 class="content-quickEnter">
          <!-- 快捷入口 -->
          <ContentQuickEnter />
        </BorderBox1>
        <BorderBox1 class="content-abnormalInfo">
          <!-- 异常信息 -->
          <ContentAbnormalInfo
            ref="abnormalInfoRef"
            @selectAbnormal="handleSelectAbnormal"
          />
        </BorderBox1>
      </div>
      <BorderBox1 class="content-pointInfo">
        <!-- 设备异常报警信息 -->
        <EquipPointImg :pointInfo="afterSaleParam.pointInfo" readonly />
      </BorderBox1>
      <div class="content-cloumn-split">
        <BorderBox1>
          <!-- 备件图表 -->
          <DileChart ref="spareChartRef" :chart="afterSaleParam.spareChart" />
        </BorderBox1>
        <BorderBox1>
          <!-- 维修记录图表 -->
          <DileChart
            ref="repairRecordChartRef"
            :chart="afterSaleParam.repairRecordChart"
            @click="handleChartClick('repairRecord', $event)"
          />
        </BorderBox1>
      </div>
    </div>
    <div class="content-split">
      <BorderBox1>
        <!-- 设备报警图表 -->
        <DileChart ref="warningChartRef" :chart="afterSaleParam.warningChart" />
      </BorderBox1>
      <BorderBox1>
        <!-- 保养状态图表 -->
        <DileChart
          ref="upkeepStatusChartRef"
          :chart="afterSaleParam.statusChart"
        />
      </BorderBox1>
    </div>
    <ContentLayer ref="contentLayerRef" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, watchEffect } from "vue";
import { BorderBox1 } from "@dataview/datav-vue3";
import { object_Inf } from "@/utils/typings/index.type";
import DileChart from "@/components/dile-chart/index.vue";
import AfterSaleUtils from "@/views/dashboardManage/sellServiceDashboard/afterSaleDashboard/afterSale-utils";
import Base_Echart from "@/views/dashboardManage/echartOperate/base";
import { useI18n } from "vue-i18n";
import ContentLayer from "./content-layer/index.vue";
import ContentQuickEnter from "./content-quickEnter/index.vue";
import ContentAbnormalInfo from "./content-abnormalInfo/index.vue";
import EquipPointImg from "@/views/equipManage/equipBaseInfo/equipType/equipType-point/point-img/index.vue";
import Dile_APi from "@/api";
import Dile_StoreAction from "@/utils/cache/store";

let { t } = useI18n();
/**
 * @Author: xzh
 * @Description: 弹框实例
 * @Param:
 */
let contentLayerRef = ref<any>(null);
/**
 * @Author: xzh
 * @Descripttion: 设备报警图表实例
 * @Param:
 */
let warningChartRef = ref<any>(null);
/**
 * @Author: xzh
 * @Descripttion: 保养状态图表实例
 * @Param:
 */
let upkeepStatusChartRef = ref<any>(null);
/**
 * @Author: xzh
 * @Descripttion: 备件图表实例
 * @Param:
 */
let spareChartRef = ref<any>(null);
/**
 * @Author: xzh
 * @Description: 维修记录图表实例
 * @Param:
 */
let repairRecordChartRef = ref<any>(null);
/**
 * @Author: xzh
 * @Description: 异常信息实例
 * @Param:
 */
let abnormalInfoRef = ref<any>(null);

/**
 * @Author: xzh
 * @Descripttion: 保养计划参数
 * @Param:
 */
let afterSaleParam = reactive<object_Inf>({
  //设备报警图表
  warningChart: {},
  //保养状态图表
  statusChart: {},
  //备件图表
  spareChart: {},
  //维修记录图表
  repairRecordChart: {},
  //异常信息
  abnormalInfoArr: [],
  //点位信息
  pointInfo: {
    pointImg: "",
    selectId: "",
    pointArr: [],
  },
});
/**
 * @Author: xzh
 * @Description: 初始化
 * @Param:
 */
watchEffect((onClear: Function) => {
  let factory = Dile_StoreAction.getCurrentFactory();
  let { current } = Dile_StoreAction.getLanguage();
  if (!!factory && !!current) {
    //清除副作用
    let timeOut = setTimeout(() => {
      initChartData();
    }, 100);
    onClear(() => {
      clearTimeout(timeOut);
    });
  }
});

/**
 * @Author: xzh
 * @Description: 加载图表数据
 * @Param:
 */
let initChartData = async () => {
  let {
    statusChart,
    warningChart,
    spareChart,
    repairRecordChart,
    abnormalInfoArr,
  } = toRefs(afterSaleParam);
  let {
    abnormalInfos,
    warningRunChart,
    equipmentNumberChart,
    repairCompleteChart,
    sparePartUseChart,
  } = await Dile_APi.getDataVInfo();

  //获取保养状态图表
  statusChart.value = AfterSaleUtils.getUpkeepStatusChart(
    equipmentNumberChart,
    {
      cover: {
        grid: {
          containLabel: false,
        },
        legend: {
          textStyle: { color: "white" },
          orient: "vertical",
          left: "right",
        },
        title: {
          text: t(`page.dataV.chartArr.statusChart`),
          textStyle: { color: "white" },
        },
      },
    }
  );

  //设备报警图表信息
  warningChart.value = AfterSaleUtils.getEquipWarningChart(warningRunChart, {
    cover: {
      grid: {
        bottom: "20%",
        containLabel: false,
      },
      legend: {
        textStyle: { color: "white" },
        bottom: 0,
      },
      title: {
        text: t(`page.dataV.chartArr.warningChart`),
        textStyle: { color: "white" },
      },
    },
  });

  //备件图表
  spareChart.value = Base_Echart.formatChartData_bar(sparePartUseChart, {
    cover: {
      grid: {
        bottom: "20%",
        containLabel: false,
      },
      legend: null,
      title: {
        text: t(`page.dataV.chartArr.spareChart`),
        textStyle: { color: "white" },
      },
    },
  });
  //维修记录
  repairRecordChart.value = Base_Echart.formatChartData_pie(
    repairCompleteChart,
    {
      cover: {
        grid: {
          bottom: "20%",
          containLabel: false,
        },
        legend: null,
        title: {
          text: t(`page.dataV.chartArr.repairRecordChart`),
          textStyle: { color: "white" },
        },
      },
    }
  );

  //加载设备异常信息
  abnormalInfoArr.value = await initEquipAlarmInfo(abnormalInfos);

  //异常信息
  abnormalInfoRef.value.init(abnormalInfoArr.value);

  //加载图表
  warningChartRef.value.init();
  upkeepStatusChartRef.value.init();
  spareChartRef.value.init();
  repairRecordChartRef.value.init();
};
/**
 * @Author: xzh
 * @Description: 加载设备异常信息
 * @Param:
 */
let initEquipAlarmInfo = async (abnormalInfos: object_Inf) => {
  let alarmInfoArr: Array<object_Inf> =
    abnormalInfos?.map((abnormal: object_Inf) => {
      let { position, abnormalInfo, abnormalContent, abnormalDate, fileId } =
        abnormal;
      return {
        ...abnormal,
        level: [
          ...new Set(abnormalInfos.map((x: object_Inf) => x.abnormalLevel)),
        ],
        alarmIds: abnormalInfos.map((x: object_Inf) => x.id),
        abnormalInfo,
        abnormalContent,
        abnormal: `${abnormalInfo}:${abnormalContent}`,
        warningTime: abnormalDate,
        fileId,
      };
    }) || [];
  return alarmInfoArr;
  //  [...new Set(alarmInfoArr.map((x) => x.position.id))].map((pointId) => {
  //   let pointArr: Array<object_Inf> =
  //     alarmInfoArr?.filter((x) => x.position.id == pointId) || [];
  //   let pointInfo = pointArr.at(0) || {},
  //     { position, abnormalInfo, abnormalContent, abnormalDate, fileId } =
  //       pointInfo;
  //   return {
  //     ...(position || {}),
  //     ...pointInfo,
  //     level: [...new Set(pointArr.map((x) => x.abnormalLevel))],
  //     alarmIds: pointArr.map((x) => x.id),
  //     abnormalInfo,
  //     abnormalContent,
  //     abnormal: `${abnormalInfo}:${abnormalContent}`,
  //     warningTime: abnormalDate,
  //     fileId,
  //   };
  // });
};

/**
 * @Author: xzh
 * @Description: 选中异常信息
 * @Param:
 * @param {*} abnormal
 */
let handleSelectAbnormal = (abnormal: object_Inf) => {
  let { fileId, equipmentCode } = abnormal || {},
    { pointInfo, abnormalInfoArr } = toRefs(afterSaleParam);
  //获取设备匹配的异常点位信息
  let pointArr = abnormalInfoArr.value
    .filter((x: object_Inf) => x.equipmentCode == equipmentCode)
    .map((abnormal: object_Inf) => {
      let { position, abnormalLevel, abnormalInfo, abnormalContent } = abnormal;
      return {
        ...JSON.parse(position || "{}"),
        abnormalLevel,
        abnormalInfo,
        abnormalContent,
      };
    })
    .filter((point: object_Inf) => !!point.x && !!point.y);
  //加载对应设备点位信息
  pointInfo.value = {
    pointImg: fileId,
    pointId: pointArr.at(0)?.id,
    pointArr: [...new Set(pointArr.map((point: object_Inf) => point.id))].map(
      (pointId) => {
        let point = pointArr.find((x: object_Inf) => x.id == pointId) || {},
          { abnormalInfo, abnormalContent } = point;
        return {
          ...point,
          level: [
            ...new Set(
              pointArr
                .filter((x: object_Inf) => x.id == pointId)
                .map((x: object_Inf) => x.abnormalLevel)
            ),
          ],
          abnormalInfo,
          abnormalContent,
        };
      }
    ),
  };
};
/**
 * @Author: xzh
 * @Description: 图表点击事件
 * @Param:
 * @param {*} type
 * @param {*} param
 */
let handleChartClick = (type: string, param: object_Inf) => {
  contentLayerRef.value.init(type, param);
};
</script>
<style lang="scss" scoped>
.content-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
  .content-split {
    display: flex;
    gap: var(--content-gap);
    flex: 1;
    height: 0;
    &:first-child {
      flex: 60% 0 0;
    }
  }
  .content-cloumn-split {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
    flex: 1;
    height: 100%;
  }
  .dv-border-box {
    flex: 1;
    :deep(.dv-border-box-content) {
      padding: 1rem;
      overflow: hidden;
    }

    &:is(.content-quickEnter) {
      flex: 30% 0 0 !important;
    }
    &:is(.content-abnormalInfo) {
      height: 0;
      :deep(.dv-border-box-content) {
        padding: 1.2rem;
      }
    }
    &:is(.content-pointInfo) {
      flex: calc(var(--point-img-heidth) * (16 / 9)) 0 0 !important;
      // flex: calc(var(--point-img-heidth) * (16 / 9)) !important;
    }
  }
  --point-img-heidth: 30%;
  --content-gap: 0;
}
</style>
